<template>
  <div class="appointment-management">
    <h2>预约管理</h2>
    
    <el-table :data="appointments" style="width: 100%" v-loading="loading">
      <el-table-column label="咨询者" prop="userName" />
      
      <el-table-column label="预约状态">
        <template #default="{ row }">
          <el-tag :type="getStatusType(row.status)">
            {{ getStatusText(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      
      <el-table-column label="创建时间" prop="createTime" />
      
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button 
            v-if="row.status === 1"
            type="primary" 
            link
            @click="handleConfirm(row)"
          >
            通过预约
          </el-button>
          <template v-if="row.status === 2">
            <el-button
              type="danger"
              link
              @click="handleCancel(row)"
            >
              取消预约
            </el-button>
            <el-button
              type="success"
              link
              @click="handleComplete(row)"
            >
              完成预约
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  getDoctorAppointments, 
  confirmAppointment,
  completeAppointment,
  doctorInitiateCancelAppointment,
  type Appointment 
} from '../../api/appointment'

const loading = ref(false)
const appointments = ref<Appointment[]>([])

// 获取预约列表
const fetchAppointments = async () => {
  loading.value = true
  try {
    const doctorId = localStorage.getItem('doctorid')
    if (!doctorId) {
      ElMessage.error('获取用户信息失败')
      return
    }
    
    const res = await getDoctorAppointments(Number(doctorId))
    if (res.code === '200') {
      appointments.value = res.data || []
    } else {
      ElMessage.error(res.msg || '获取预约列表失败')
    }
  } catch (error) {
    console.error('获取预约列表失败:', error)
    ElMessage.error('获取预约列表失败')
  } finally {
    loading.value = false
  }
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0: return '已完成'
    case 1: return '待确认'
    case 2: return '已确认'
    case 3: return '申请取消中'
    default: return '未知状态'
  }
}

// 获取状态标签类型
const getStatusType = (status: number) => {
  switch (status) {
    case 0: return 'info'
    case 1: return 'warning'
    case 2: return 'success'
    case 3: return 'warning'
    default: return 'info'
  }
}

// 确认预约
const handleConfirm = async (row: Appointment) => {
  try {
    await ElMessageBox.confirm(
      '确定要通过这个预约吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const res = await confirmAppointment(row.appointmentId)
    if (res.code === '200') {
      ElMessage.success('已通过预约')
      fetchAppointments()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('操作失败:', error)
      ElMessage.error('操作失败')
    }
  }
}

// 取消预约
const handleCancel = async (row: Appointment) => {
  try {
    await ElMessageBox.confirm(
      '确定要取消这个预约吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const res = await doctorInitiateCancelAppointment(row.appointmentId)
    if (res.code === '200') {
      ElMessage.success('已发起取消申请')
      fetchAppointments()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('操作失败:', error)
      ElMessage.error('操作失败')
    }
  }
}

// 完成预约
const handleComplete = async (row: Appointment) => {
  try {
    await ElMessageBox.confirm(
      '确定要完成这个预约吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const res = await completeAppointment(row.appointmentId)
    if (res.code === '200') {
      ElMessage.success('预约已完成')
      fetchAppointments()
    } else {
      ElMessage.error(res.msg || '操作失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('操作失败:', error)
      ElMessage.error('操作失败')
    }
  }
}

onMounted(() => {
  fetchAppointments()
})
</script>

<style scoped>
.appointment-management {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #2c3e50;
}
</style>